<script setup>
import { onMounted, ref } from "vue";
import { useRoute,useRouter } from "vue-router";
import {
  getMstselList,
  getMstelandMstinfoByMstselId,
} from "@/apis/mstsel/mstsel";

const route = useRoute();
const router = useRouter();

const mstselId = ref({});
const mstelandMstinfoData = ref({});
const getMstelandMstinfoDataByMstselId = async () => {
  // console.log(route.query);
  if (route.query.id) {
    mstselId.value = route.query.id;
  } else {
    mstselId.value = 0;
  }
  const res = await getMstelandMstinfoByMstselId(mstselId.value);
  // console.log(res);
  mstelandMstinfoData.value = res.data;
};

const mstselListData = ref([]);
const getMstselListData = async () => {
  const res = await getMstselList();
  mstselListData.value = res.data;
};
const mstselClick = async(id) => {
  mstselId.value = id
  const res = await getMstelandMstinfoByMstselId(id);
  mstelandMstinfoData.value = res.data;
}
const mstinfoClick = (id) => {
  router.push({
    path:'/mstinfo',
    query:{
      id:id
    }
  })
}



onMounted(() => {
  getMstselListData();
  getMstelandMstinfoDataByMstselId();
});
</script>

<template>
  <section class="page-header bg--cover bg-mstsel">
    <div class="container">
      <div class="page-header__content text-center">
        <h2 class="text-capitalize">面试题</h2>
        <nav style="--bs-breadcrumb-divider: '-'" aria-label="breadcrumb">
          <ol class="breadcrumb justify-content-center mb-0">
            <li class="breadcrumb-item"><a href="index.html">面试题分类</a></li>
            <li class="breadcrumb-item active" aria-current="page">列表</li>
          </ol>
        </nav>
      </div>
    </div>
  </section>

  <!-- <el-tabs v-model="activeName" @tab-click="handleClick" class="mst-sel">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs> -->
  <div class="stacking padding-top padding-bottom">
    <div class="container">
      <div class="stacking__wrapper">
        <div class="stacking__details">
          <div class="stacking__title">
            <h3>面试题分类 {{ mstelandMstinfoData.mstSelName }}</h3>
          </div>
          <div class="stacking__content">
            <div class="row align-items-center g-5">
              <div class="col-lg-7">
                <div class="stacking__period">
                  <ul
                    class="stacking__period-list nav nav-pills"
                    id="stackingPeriod"
                    role="tablist"
                  >
                    <li
                      class="nav-item"
                      role="presentation"
                      v-for="item in mstselListData"
                      :key="item.id"
                    >
                      <button
                        :class="[
                          'nav-link',
                          { active: item.id == mstselId },
                        ]"
                        id="period-tab1"
                        data-bs-toggle="tab"
                        data-bs-target="#period-tab1-pane"
                        type="button"
                        role="tab"
                        aria-controls="period-tab1-pane"
                        aria-selected="true"
                        @click="mstselClick(item.id)"
                      >
                        {{ item.mstSelName }}
                      </button>
                    </li>
                  </ul>
                  <div class="tab-content" id="myTabContent">
                    <div
                      class="tab-pane fade show active"
                      id="period-tab1-pane"
                      role="tabpanel"
                      aria-labelledby="period-tab1"
                      tabindex="0"
                    >
                      <div class="stacking__info">
                        <div class="row align-items-center g-5">
                          <div class="col-sm-8">
                            <ul class="stacking__info-list">
                              <div v-if="mstelandMstinfoData.mstSelName">
                                <li class="stacking__info-item">
                                  <p class="stacking__info-name">
                                    面试题分类名称:
                                    <span class="stacking__info-value">{{
                                      mstelandMstinfoData.mstSelName
                                    }}</span>
                                  </p>
                                </li>
                              </div>
                              <div v-else>
                                <li class="stacking__info-item">
                                  <p class="stacking__info-name">
                                    面试题作者:
                                    <span class="stacking__info-value">
                                      籍祥</span
                                    >
                                  </p>
                                </li>
                              </div>
                              <div v-if="mstelandMstinfoData.mstSelDes">
                                <li class="stacking__info-item">
                                  <p class="stacking__info-name">
                                    面试题介绍:
                                    <span class="stacking__info-value">
                                      {{ mstelandMstinfoData.mstSelDes }}
                                    </span>
                                  </p>
                                </li>
                              </div>
                              <div v-else>
                                <li class="stacking__info-item">
                                  <p class="stacking__info-name">
                                    面试题更新时间:
                                    <span class="stacking__info-value">
                                      2023.12.29
                                    </span>
                                  </p>
                                </li>
                              </div>
                            </ul>
                          </div>
                          <!-- <div class="col-sm-4">
                            <div class="stacking__apy">
                              <p>APY Rate</p>
                              <h3>10%</h3>
                            </div>
                          </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-5 col-md-8">
                <div class="stacking__approve">
                  <div class="stacking__approve-field mb-5">
                    <label for="approve-stack" class="form-label"
                      >Balance: <span>3529.00 BUSD</span>
                    </label>
                    <div class="input-group">
                      <input
                        type="text"
                        class="form-control"
                        aria-label="Approve Stack"
                        id="approve-stack"
                        placeholder="0.00"
                      />
                      <span class="input-group-text">Max</span>
                      <button class="input-group-btn">Approve</button>
                    </div>
                  </div>
                  <div class="stacking__approve-withdraw">
                    <label for="withdraw-stack" class="form-label"
                      >Staked: <span>350.70 BUSD</span>
                    </label>
                    <div class="input-group">
                      <input
                        type="text"
                        class="form-control"
                        aria-label="Withdraw Stack"
                        id="withdraw-stack"
                        placeholder="0.00"
                      />
                      <span class="input-group-text">Max</span>
                      <button class="input-group-btn withdraw-btn">
                        Withdraw
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <p class="note-text"><strong>提示:</strong> 本面试题为参考</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <section class="leaderboard padding-top padding-bottom">
    <div class="container">
      <div class="leaderboard__wrapper">
        <div class="table-responsive">
          <table class="table table-borderless leaderboard__table">
            <thead>
              <tr>
                <th scope="col">题号</th>
                <th scope="col">题库名</th>
                <th scope="col">面试题名称</th>
                <th scope="col">面试题简介</th>
                <th scope="col">点击率</th> 
              </tr>
            </thead>
            <tbody>
              <tr
                class="leaderboard__item"
                v-for="item in mstelandMstinfoData.mstinfoList"
                :key="item.id"
                @click="mstinfoClick(item.id)"
              >
                <th scope="row">{{ item.mstInfoSort }}</th>
                <td>
                  <div class="lead-project position-relative">
                    <div class="lead-project__thumb">
                      <img
                        :src="mstelandMstinfoData.mstSelIcon"
                        alt="Project Image"
                      />
                    </div>
                    <div class="lead-project__content">
                      <h6>
                        <a
                          class="stretched-link"
                          >{{ mstelandMstinfoData.mstSelName }}
                        </a>
                      </h6>
                    </div>
                  </div>
                </td>
                <th scope="row">{{ item.mstInfoTitle }}</th>
                <th scope="row">{{ item.mstInfoDes }}</th>
                <th scope="row">{{ item.hits }}</th>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped lang='scss'>
.bg-mstsel {
  background-image: url("../../assets/images/banner/bg.jpg");
}
// .mstsel-sel {
//   font-size: 90px;
//   color: white;
// }
// ::v-deep .el-tabs__active-bar {
//   background-color: transparent !important;
// }
// ::v-deep .el-tabs__nav-wrap::after {
//   position: static !important;
// }
// ::v-deep .el-tabs__item{
//   font-size: 20px;
//   color: white;
// }
</style>